<template>
  <div>
    <div class="header"></div>
    <div class="iconfont iconicon-test frist"></div>
    <div class="logo iconfont iconnew"></div>  
    <myinput
    name='username'
      type='username'
      placeholder="用户名/手机号"
      err_message='请输入11位的手机号'
      @input="handlerinput"
      :rules="/^1[35789]\d{9}$/"
    ></myinput>
    <myinput name='nickname' type='nickname' placeholder="昵称" err_message='请输入5位的昵称' :rules="/^.{5}$/" @input="handlerinput"></myinput>
    <myinput
     name='password'
      placeholder="密码"
      err_message='请输入8-16位的其中包含英文字母的密码'
      type="password"
      @input="handlerinput"
      :rules="/^(?![0-9]+$)(?![a-zA-Z]+$)[0-9A-Za-z]{8,16}$/"
    ></myinput>
    <mybutton type="success" @click="registerHandle">注册</mybutton>
  </div>
</template>

<script>
import "../styles/iconfont.css";
import myinput from "../components/myframe/myinput";
import mybutton from "../components/myframe/mybutton";
import {userLogin} from '@/api/index.js'
import {register} from '@/api/index.js'
export default {
  components: {
    myinput,
    mybutton,
  },
  data() {
    return {
      username: "",
      nickname:"",
      password: "",
    };
  },
  methods: {
      handlerinput(data) {
      // console.log(this.text, this.password);
      // console.log(data);
      const key=Object.keys(data)[0]
      const value=Object.values(data)[0]
      this[key]=value
      // console.log(this.username,this.password);
      
    },
    registerHandle() {
      // console.log(11);
      
      // console.log(this.text, this.password);
      if(!this.username || !this.password ||!this.nickname){
        console.log(this.username,this.password);
         return this.$toast.fail('请输入完整信息')
      }
      const data={username:this.username,password:this.password,nickname:this.nickname}
      register(data).then((res)=>{
        console.log(res);
        if(res.data.statusCode==400){
          this.$toast.fail(res.data.message)
        }else{
          this.$toast.success("恭喜你，注册成功！");
        }
      })
    },
  
  },
};
</script>

<style lang="less" scoped>
.logo{
  text-align: center;
  color: #d81e06;
  font-size: 160px;
}
.header {
  width: 100vw;
  height: 30/540 * 100vw;
  background-color: #757575;
}
.frist {
  margin-top: 26px;
  margin-left: 17px;
  font-size: 30px;
}
</style>